<template>
    <el-collapse>
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    文件组件
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'lowcode',pull:'clone',put:false}"
                    @start="onStart"
                    :clone="cloneDefaultField"
                    item-key="sourceId"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import draggable from "vuedraggable";
import {deepCopy} from "@/utils/tagCreate";

export default {
    name: "FileInfoIndex",
    components: {
        draggable
    },
    data() {
        return {
            list: [
                {
                    name: "文件上传", title: "文件上传编辑", component: "FileUploadComponent", drawerComponent: "FileUploadDrawer", sourceId: 1,
                    propJson: {
                        editFlag: true,
                        uploadSelectType: "button", // 文件上传组件类型 button/icon
                        buttonName: "文件上传",
                        iconFontSize: "28px",
                        iconFontHeight: "120px",
                        upLoadUrl: "",
                        isUpLoadLimit: false,
                        upLoadLimit: "1",
                        isShowFileList: false,
                        isDraggable: false,
                        listType: "text",
                        isDisabled: false,
                        isMultiple: false,
                        isShowTips: false,
                        tipInfo: "",
                        isLimitFileSize: false,
                        limitFileSize: "1MB",
                        uploadDataValue: []
                    }
                },
                {
                    name: "图片", title: "图片编辑", component: "ImageComponent", drawerComponent: "ImageDrawer", sourceId: 2,
                    propJson: {
                        editFlag: true,
                        imageUrl: "",
                        imageFit: "",
                        isPreview: false,
                        isLazy: false,
                        isClickOnClosPreview: false,
                        imageWidth: "",
                        imageHeight: ""
                    }
                },
                {
                    name: "分段文件上传", title: "分段文件上传编辑", component: "FileUploadMultiComponent", drawerComponent: "FileUploadMultiDrawer", sourceId: 3,
                    propJson: {
                        editFlag: true,
                        partSize: "1", // 文件分片大小
                        partSizeUnit: "mb", // 文件分片大小单位
                        maxCheckLevel: 10, // 最大的校验循环次数
                        uploadType: "button", // 文件上传组件类型 button/icon
                        buttonFontSize: "15", // 按钮文字大小
                        iconFontSize: "", // 图标大小
                        iconFontHeight: "", // 框图组件高度
                        doUploadBeforeAction: {apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: []}, // 上传文件前置动作
                        doUploadAction: {apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: []}, // 上传文件动作
                        doUploadCheckAction: {apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: []}, // 上传文件校验动作
                        doUploadMergeAction: {apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: []}, // 上传文件完成之后的最后请求
                        doUploadBeforeActionInnerRequestVariable: [{ // 上传文件前置动作内置变量
                            name: "内置参数 partNum",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }, {
                            name: "内置参数 fileName",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }],
                        doUploadActionInnerRequestVariable: [{ // 上传文件动作内置变量
                            name: "内置参数 partNum",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        },{
                            name: "内置参数 multiFile",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        },{
                            name: "内置参数 fileName",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        },{
                            name: "内置参数 segmentId",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }],
                        doUploadCheckActionInnerRequestVariable: [{ // 上传文件校验动作内置变量
                            name: "内置参数 partNum",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }, {
                            name: "内置参数 fileName",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }],
                        doUploadMergeActionInnerRequestVariable: [{ // 上传文件结束动作内置变量
                            name: "内置参数 partNum",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }, {
                            name: "内置参数 fileName",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }],
                    }
                }
            ]
        }
    },
    methods: {
        cloneDefaultField(e) {
            return deepCopy(e);
        },
        onStart(e) {
            e.item._underlying_vm_.id = this.generateUUID();
        },
        randomNumber() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        },
        generateUUID() {
            return (this.randomNumber() + this.randomNumber() + "-" + this.randomNumber() + "-" + this.randomNumber() +
                "-" + this.randomNumber() + "-" + this.randomNumber() + this.randomNumber() + this.randomNumber());
        }
    }
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {

    }
    .chosenClass {

    }
    .itemClass {
        font-size: 13px;
        color: #606266;
        text-align: center;
        width: 90%;
        line-height: 250%;
        margin-left: 5%;
        //去除光标
        caret-color: transparent;
        background-color: #FAFCFF;
        transition: box-shadow 0.3s ease;
        border: 1px solid #F0F2F5;
        border-radius: 5px;
        margin-bottom: 2%;
    }
    .itemClass:hover{
        cursor: pointer;
        color: #409EFF;
        background-color: #EBEEF5;
    }
}
</style>